<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{lib/layui-v2.6.3/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        .layui-table-cell {
            height: 45px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

<!--    <fieldset class="table-search-fieldset">-->
<!--      <legend>搜索信息</legend>-->
<!--      <div style="margin: 10px 10px 10px 10px">-->
<!--        <form class="layui-form layui-form-pane" action="">-->
<!--          <div class="layui-form-item">-->
<!--            <div class="layui-inline">-->
<!--              <label class="layui-form-label">姓名</label>-->
<!--              <div class="layui-input-inline">-->
<!--                <input type="text" name="username" autocomplete="off" class="layui-input">-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="layui-inline">-->
<!--              <label class="layui-form-label">性别</label>-->
<!--              <div class="layui-input-inline">-->
<!--                <input type="text" name="sex" autocomplete="off" class="layui-input">-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="layui-inline">-->
<!--              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </form>-->
<!--      </div>-->
<!--    </fieldset>-->

      <fieldset class="table-search-fieldset">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
              <form class="layui-form layui-form-pane" action="">
                  <div class="layui-form-item">
                      <div class="layui-inline">
                          <label class="layui-form-label">用户名</label>
                          <div class="layui-input-inline">
                              <input type="text" name="userName" autocomplete="off" class="layui-input">
                          </div>
                      </div>
                      <div class="layui-inline">
                          <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                      </div>
                  </div>
              </form>
          </div>
      </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn data-add-btn" lay-event="add"> 添加 </button>
          <button class="layui-btn" lay-event="download">
              <i class="layui-icon">&#xe601;</i>导出用户
          </button>
          <button type="button" class="layui-btn" id="excel-upload">
              <i class="layui-icon">&#xe67c;</i>批量添加
          </button>
          <a class="layui-btn-xs" id="excel-template" href="https://share-cloud-plant.oss-cn-beijing.aliyuncs.com/%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx">下载用户导入模板</a>
<!--        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>-->
      </div>
    </script>

    <table id="currentTableId" lay-filter="currentTableFilter"></table>


    <script type="text/html"  id="currentTableBar">
      <a class="layui-btn layui-btn-normal data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:inline="none">
  // var cpxPath=[[${"/"}]]
  layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
    table.render({
      elem: '#currentTableId',
      url: '/admin/user/search',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cellHeight:'45',
      cols: [[
        {field: 'userId', width: 100, title: 'ID', sort: true},
        {field: 'userName', width: 100, title: '用户名'},
        {field: 'userPhoto', width: 80, title: '头像',templet:function (d) {
            return "<img src='" + d.userPhoto + "' height=\"40\" width=\"40\" />"}},
        {field: 'userAccount', width: 120, title: '账号'},
        {field: 'userPassword', width: 120, title: '密码'},
        {field: 'collegeId', width: 120, title: '学校编号'},
        {field: 'email', width: 120, title: '邮箱'},
        {field: 'userPhone', width: 120, title: '手机号'},
        {field: 'userRole', width: 120, title: '用户角色', templet:function (d) {
                return d.userRole == 1 ? "普通用户":"学生" }},
        {field: 'createTime', width: 240, title: '创建时间', templet:function (d) {
                return layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss');}},
        {title: '操作',minWidth:120 ,toolbar: '#currentTableBar', align: "center"}
      ]]
      //   ,
      // parseData: function(res){ //res 即为原始返回的数据
      //     alert(JSON.stringify(res));
      //   return {
      //     "code": res.code, //解析接口状态
      //     "msg": res.msg, //解析提示文本
      //     "count": res.total, //解析数据长度
      //     "data": res.data //解析数据列表
      //   }},
        ,
        response: {
            statusName: 'code' //规定数据状态的字段名称，默认：code
            ,statusCode: "001" //规定成功的状态码，默认：0
            ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
            ,countName: 'total' //规定数据总数的字段名称，默认：count
            ,dataName: 'data' //规定数据列表的字段名称，默认：data
        },
      request: {
        pageName: 'currentPage' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'
    });

      // 监听搜索操作
      form.on('submit(data-search-btn)', function (data) {
          var key = data.field.userName;
          // console.log(key);
          // 执行搜索重载
          table.reload('currentTableId', {
              page: {
                  curr: 1
              }
              , where: {
                  search: key
              }
          }, 'data');
          return false;
      });

      /**
       * excel批量上传
       */
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#excel-upload' //绑定元素
            ,url: '/admin/user/save/excel' //上传接口
            ,accept: 'file'
            ,acceptMime: 'file'
            ,exts: 'xls|xlsx'
            ,done: function(res){
                //上传完毕回调
                if (res.code == '001'){
                    layer.msg("添加成功");
                    table.reload('currentTableId', {
                        page: {
                            curr: 1,
                            limit:15
                        }
                    }, 'data');
                }else{
                    layer.msg(resp.msg);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        var index = layer.open({
          title: '添加用户',
          type: 2,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: ['70%', '80%'],
          content: '/admin/user/save/html',
        });
        $(window).on("resize", function () {
          layer.full(index);
        });
      } else if (obj.event === 'download') {
          // 监听删除操作
        // var checkStatus = table.checkStatus('currentTableId')
        //         , data = checkStatus.data;
        // layer.alert(JSON.stringify(data));
          window.location.href="/admin/user/export"
      }
    });

    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var userInfo = obj.data;
      if (obj.event === 'edit') {

        var index = layer.open({
          title: '编辑用户',
          type: 2,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: ['70%', '80%'],
          //访问对应的页面
          content: '/admin/user/update/html',
          success:function (layero,index) {
            var body = layer.getChildFrame('body', index);
            //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
            body.find("#userId").val(userInfo.userId);
            body.find("#userName").val(userInfo.userName);
            body.find("#userAccount").val(userInfo.userAccount);
            body.find("#hpp").val(userInfo.userPhoto);
            body.find('#demo1').attr('src', userInfo.userPhoto);
            body.find("#userPassword").val(userInfo.userPassword);
            body.find("#userPhone").val(userInfo.userPhone);
            body.find("#email").val(userInfo.email);
          }
        });
        $(window).on("resize", function () {
          layer.full(index,userInfo);
        });
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm('确认要删除数据?', function (index) {
          // console.log(obj.data.userId)
          $.post({
            url:"/admin/user/delete/"+obj.data.userId,
            // data:{
            //   userId:obj.data.userId
            // },
            success:function (resp){
              // console.log(obj.data.userId)
              // console.log(resp)
                if (resp.code == '001'){
                    layer.msg(resp.msg);
                    //obj.del();//删除数据

                    table.reload('currentTableId', {
                        page: {
                            curr: 1,
                            limit:15
                        }
                    }, 'data');
                }else{
                    layer.msg(resp.msg);
                }

            },
            field:function (resp) {

            }
          })
          layer.close(index);
        });
      }
    });

  });
</script>

</body>
</html>